<template>
	<view class="content">
		<view class="content-header">邮箱找回</view>
		<view class="content-input">
			<input type="text" placeholder="请输入账号绑定的邮箱" v-model="email" @input="checkEmail" />
		</view>
		<view class="content-next">
			<button type="primary" style="margin: 10% 10%;" :disabled="isDisabled == false" @click="toNext" >下一步</button>
		</view>
		<view class="content-bottom">
			<contentBottom></contentBottom>
		</view>
	</view>
</template>

<script>
	import contentBottom from '../../../components/content-bottom/content-bottom.vue';
	export default {
		data() {
			return {
				email: '',
				isDisabled: false,
			};
		},
		components: {
			contentBottom
		},
		onLoad() {
			
		},
		methods: {
			checkEmail() {
				let that = this;
				if(that.email == '' || that.email == null) {
					that.isDisabled = false;
				} else{
					that.isDisabled = true;
				}
			},
			toNext() {
				let that = this;
				let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if(!emailRegex.test(that.email)) {
					uni.showToast({
						title: '邮箱格式错误!',
						icon: 'none'
					})
				} else {
					uni.request({
						url: 'http://localhost:8080/api/useEmail',
						method: 'POST',
						data: that.email,
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							console.log("res",res);
							if(res.statusCode == 200) {
								if(res.data.data.code == "0") {
									that.emailIsLegal = true;
									let resData = {
										mobile: null,
										email: that.email,
										account: res.data.data.msg,
										isEmail: true
									}
									uni.navigateTo({
										url: '/pages/login/forgetPwd/checkCode?resData=' + encodeURIComponent(JSON.stringify(resData))
									})
								}
								if(res.data.data.code == "-1") {
									uni.showToast({
										title: '邮箱未尚未绑定账号',
										icon: 'none'
									})
								}
							}
						}
					})
				}
				
			}
			
		}
	};
</script>


<style scoped>
	.content-header {
		display: flex;
		justify-content: center;
		font-size: 40rpx;
		font-weight: 600;
		margin-top: 25%;
		margin-bottom: 10%;
	}
	
	.content-input {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 3%;
		margin: 10% 20%;
		border: 1px solid #c9c9c9;
		border-radius: 20rpx;
	}
	
	.content-bottom {
		display: flex;
		justify-content: center;
		margin-top: 287rpx;
	}
	
</style>
